<template>
  <div style="display: flex">
    <u-checkbox v-model="check" @change="$emit('input', check)">
      我已同意
      <template #icon="props">
        <i
          class="protocol__checkbox"
          :class="{
            'is-active': props.checked,
            'van-hairline--surround': !props.checked
          }"
        />
      </template>
    </u-checkbox>
    <span class="protocol__link" @click="showProtocol = true">《智慧校园用户协议》</span>
    <!-- <user-protocol v-model="showProtocol" /> -->
  </div>
</template>

<script>
  // import UserProtocol from '@components/common/user-protocol/index';

  export default {
    // components: { UserProtocol },
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        check: false,
        showProtocol: false
      };
    },
    watch: {
      value(nVal) {
        this.check = nVal;
      }
    }
  };
</script>

<style scoped lang="less">
  .protocol {
    &::after {
      content: none;
    }

    /deep/ .van-checkbox__label {
      margin-left: 4px;
      font-size: 13px;
      color: #73757c;
    }

    &__link {
      color: #5ccc2b;
    }

    &__checkbox {
      display: inline-block;
      width: 14px;
      height: 14px;
      font-size: 14px;
      transition: background 0.2s linear;

      &.is-active {
        background: url('~@static/logo.png') no-repeat center center/ cover;
      }

      &::after {
        border-color: #888;
        border-radius: 50%;
      }
    }
  }
</style>
